import React from 'react'
import { useEffect, useState } from "react";
import '../assets/css/mine.css'
import { NavBar, Swiper } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
//引入接口
import { Banner } from '../request/app'
//引入图片
import touxiang from '../assets/images/头像.png'
import day from '../assets/images/day.png' 
import fukuan from '../assets/images/待付款.png'
import shouhuo from '../assets/images/待收货.png'
import pingjia from '../assets/images/评价.png'
import shouhou from '../assets/images/售后.png'
import dizhi from '../assets/images/地址1.png'
import qianbao from '../assets/images/钱包.png'
import erweima from '../assets/images/二维码.png'
import huoban from '../assets/images/伙伴.png'
import shiyong from '../assets/images/试用.png'
function Home() {

    const Navigate = useNavigate()
    function Back() {
        Navigate(-1)
    }
    let [bannerlist, changebanner] = useState([])
    useEffect(() => {
        Banner()
            .then(res => {
                console.log(res);
                changebanner([...res.list])
            })
    }, [])
    const items = bannerlist.map(item => {
        return <Swiper.Item key={item.id}>
            <img src={item.img} alt="" />
        </Swiper.Item>
    })
    console.log(items);
    return (<div>
        {/* 头部 */}
        <div className="header">
            {/* 头部icon部分 */}
            <div className='icon'></div>
            {/* 头部标题 */}
            <NavBar onBack={() => Back()}>个人中心</NavBar>
            {/* 个人信息 */}
            <div className="mine">
                <div className='touxiang'>
                    <div>
                        <img src={touxiang} alt="" />
                    </div>
                    <div className="name">
                        <p>代用名</p>
                        <p>完善资料让小u更懂你</p>
                    </div>
                    <div className='day'>
                        <img src={day} alt="" />
                    </div>
                </div>
                {/* 浏览记录 */}
                <ul className="history">
                    <li>
                        <p>12</p>
                        <p>我的收藏</p>
                    </li>
                    <li>
                        <p>12</p>
                        <p>浏览记录</p>
                    </li>
                    <li>
                        <p>&yen;0</p>
                        <p>我的红包</p>
                    </li>
                    <li>
                        <p>12</p>
                        <p>优惠券</p>
                    </li>
                </ul>
                {/* 我的订单 */}
                <div className="myOrder">
                    <div>
                        <span>我的订单</span>
                        <span>全部订单&gt;</span>
                    </div>
                    <ul className='shopState'>
                        <li>
                            <p><img src={fukuan} alt="" /></p>
                            <p>待付款</p>
                        </li>
                        <li>
                            <p><img src={shouhuo} alt="" /></p>
                            <p>待收货</p>
                        </li>
                        <li>
                            <p><img src={pingjia} alt="" /></p>
                            <p>评价</p>
                        </li>
                        <li>
                            <p><img src={shouhou} alt="" /></p>
                            <p>售后/退款</p>
                        </li>
                    </ul>
                </div>
            </div>
            {/* 主题内容 */}
            <div className="body">
                <div className="banner1">
                    <Swiper autoplay>
                        {items}
                    </Swiper>
                </div>
                <ul className="info">
                    <li>
                        <p><img src={dizhi} alt="" /></p>
                        <p>地址管理</p>
                    </li>
                    <li>
                        <p><img src={qianbao} alt="" /></p>
                        <p>我的钱包</p>
                    </li>
                    <li>
                        <p><img src={erweima} alt="" /></p>
                        <p>我的二维码</p>
                    </li>
                    <li>
                        <p><img src={huoban} alt="" /></p>
                        <p>我的小伙伴</p>
                    </li>
                    <li>
                        <p><img src={shiyong} alt="" /></p>
                        <p>0元试用</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>)
}
export default Home


